<!doctype html>
<html>
<head>
<title>Your Font/Glyphs</title>
<link rel="stylesheet" href="style.css" />
<!--[if lte IE 7]><script src="lte-ie7.js"></script><![endif]-->
<style>
	section, header, footer {display: block;}
	body {
		font-family: sans-serif;
		color: #444;
		line-height: 1.5;
		font-size: 1em;
	}
	* {
		-moz-box-sizing: border-box;
		-webkit-box-sizing: border-box;
		box-sizing: border-box;
		margin: 0;
		padding: 0;
	}
	.glyph {
		font-size: 16px;
		float: left;
		text-align: center;
		background: #eee;
		padding: .75em;
		margin: .75em 1.5em .75em 0;
		width: 7em;
		border-radius: .25em;
		box-shadow: inset 0 0 0 1px #f8f8f8, 0 0 0 1px #CCC;
	}
	.glyph input {
		width: 100%;
		text-align: center;
		font-family: consolas, monospace;
	}
	.glyph input, .mtm {
		margin-top: .75em;
	}
	.w-main {
		width: 80%;
	}
	.centered {
		margin-left: auto;
		margin-right: auto;
	}
	.fs1 {
		font-size: 2em;
	}
	header {
		margin: 2em 0;
		padding-bottom: .5em;
		color: #666;
		box-shadow: 0 2px #eee;
	}
	header h1 {
		font-size: 2em;
		font-weight: normal;
	}
	.clearfix:before, .clearfix:after { content: ""; display: table; }
	.clearfix:after, .clear { clear: both; }
	footer {
		margin-top: 2em;
		padding: .5em 0;
		box-shadow: 0 -2px #eee;
	}
	a, a:visited {
		color: #B35047;
		text-decoration: none;
	}
	a:hover, a:focus {color: #000;}
	.box1 {
		font-size: 16px;
		display: inline-block;
		width: 15em;
		padding: .25em .5em;
		background: #eee;
		margin: .5em 1em .5em 0;
	}
</style>
</head>
<body>
	<div class="w-main centered">
	<section class="mtm clearfix" id="glyphs">
	<header>
		<h1>Your font contains the following glyphs</h1>
		<p>The generated SVG font can be imported back to <a href="http://icomoon.io/app">IcoMoon</a> for modification.</p>
	</header>
	<div class="glyph">
		<div class="fs1" aria-hidden="true" data-icon="&#x21;"></div>
		<input type="text" readonly="readonly" value="&amp;#x21;" />
	</div>
	<div class="glyph">
		<div class="fs1" aria-hidden="true" data-icon="&#x22;"></div>
		<input type="text" readonly="readonly" value="&amp;#x22;" />
	</div>
	<div class="glyph">
		<div class="fs1" aria-hidden="true" data-icon="&#x23;"></div>
		<input type="text" readonly="readonly" value="&amp;#x23;" />
	</div>
	<div class="glyph">
		<div class="fs1" aria-hidden="true" data-icon="&#x24;"></div>
		<input type="text" readonly="readonly" value="&amp;#x24;" />
	</div>
	<div class="glyph">
		<div class="fs1" aria-hidden="true" data-icon="&#x25;"></div>
		<input type="text" readonly="readonly" value="&amp;#x25;" />
	</div>
	<div class="glyph">
		<div class="fs1" aria-hidden="true" data-icon="&#x26;"></div>
		<input type="text" readonly="readonly" value="&amp;#x26;" />
	</div>
	<div class="glyph">
		<div class="fs1" aria-hidden="true" data-icon="&#x27;"></div>
		<input type="text" readonly="readonly" value="&amp;#x27;" />
	</div>
	<div class="glyph">
		<div class="fs1" aria-hidden="true" data-icon="&#x28;"></div>
		<input type="text" readonly="readonly" value="&amp;#x28;" />
	</div>
	<div class="glyph">
		<div class="fs1" aria-hidden="true" data-icon="&#x29;"></div>
		<input type="text" readonly="readonly" value="&amp;#x29;" />
	</div>
	<div class="glyph">
		<div class="fs1" aria-hidden="true" data-icon="&#x2a;"></div>
		<input type="text" readonly="readonly" value="&amp;#x2a;" />
	</div>
	<div class="glyph">
		<div class="fs1" aria-hidden="true" data-icon="&#x2b;"></div>
		<input type="text" readonly="readonly" value="&amp;#x2b;" />
	</div>
	<div class="glyph">
		<div class="fs1" aria-hidden="true" data-icon="&#x2c;"></div>
		<input type="text" readonly="readonly" value="&amp;#x2c;" />
	</div>
	<div class="glyph">
		<div class="fs1" aria-hidden="true" data-icon="&#x2d;"></div>
		<input type="text" readonly="readonly" value="&amp;#x2d;" />
	</div>
	<div class="glyph">
		<div class="fs1" aria-hidden="true" data-icon="&#x2e;"></div>
		<input type="text" readonly="readonly" value="&amp;#x2e;" />
	</div>
	<div class="glyph">
		<div class="fs1" aria-hidden="true" data-icon="&#x2f;"></div>
		<input type="text" readonly="readonly" value="&amp;#x2f;" />
	</div>
	<div class="glyph">
		<div class="fs1" aria-hidden="true" data-icon="&#x30;"></div>
		<input type="text" readonly="readonly" value="&amp;#x30;" />
	</div>
	<div class="glyph">
		<div class="fs1" aria-hidden="true" data-icon="&#x31;"></div>
		<input type="text" readonly="readonly" value="&amp;#x31;" />
	</div>
	<div class="glyph">
		<div class="fs1" aria-hidden="true" data-icon="&#x32;"></div>
		<input type="text" readonly="readonly" value="&amp;#x32;" />
	</div>
	<div class="glyph">
		<div class="fs1" aria-hidden="true" data-icon="&#x33;"></div>
		<input type="text" readonly="readonly" value="&amp;#x33;" />
	</div>
	<div class="glyph">
		<div class="fs1" aria-hidden="true" data-icon="&#x34;"></div>
		<input type="text" readonly="readonly" value="&amp;#x34;" />
	</div>
	<div class="glyph">
		<div class="fs1" aria-hidden="true" data-icon="&#x35;"></div>
		<input type="text" readonly="readonly" value="&amp;#x35;" />
	</div>
	<div class="glyph">
		<div class="fs1" aria-hidden="true" data-icon="&#x36;"></div>
		<input type="text" readonly="readonly" value="&amp;#x36;" />
	</div>
	<div class="glyph">
		<div class="fs1" aria-hidden="true" data-icon="&#x37;"></div>
		<input type="text" readonly="readonly" value="&amp;#x37;" />
	</div>
	<div class="glyph">
		<div class="fs1" aria-hidden="true" data-icon="&#x38;"></div>
		<input type="text" readonly="readonly" value="&amp;#x38;" />
	</div>
	<div class="glyph">
		<div class="fs1" aria-hidden="true" data-icon="&#x39;"></div>
		<input type="text" readonly="readonly" value="&amp;#x39;" />
	</div>
	<div class="glyph">
		<div class="fs1" aria-hidden="true" data-icon="&#x3a;"></div>
		<input type="text" readonly="readonly" value="&amp;#x3a;" />
	</div>
	<div class="glyph">
		<div class="fs1" aria-hidden="true" data-icon="&#x3b;"></div>
		<input type="text" readonly="readonly" value="&amp;#x3b;" />
	</div>
	<div class="glyph">
		<div class="fs1" aria-hidden="true" data-icon="&#x3c;"></div>
		<input type="text" readonly="readonly" value="&amp;#x3c;" />
	</div>
	<div class="glyph">
		<div class="fs1" aria-hidden="true" data-icon="&#x3d;"></div>
		<input type="text" readonly="readonly" value="&amp;#x3d;" />
	</div>
	<div class="glyph">
		<div class="fs1" aria-hidden="true" data-icon="&#x3e;"></div>
		<input type="text" readonly="readonly" value="&amp;#x3e;" />
	</div>
	<div class="glyph">
		<div class="fs1" aria-hidden="true" data-icon="&#x3f;"></div>
		<input type="text" readonly="readonly" value="&amp;#x3f;" />
	</div>
	<div class="glyph">
		<div class="fs1" aria-hidden="true" data-icon="&#x40;"></div>
		<input type="text" readonly="readonly" value="&amp;#x40;" />
	</div>
	<div class="glyph">
		<div class="fs1" aria-hidden="true" data-icon="&#x41;"></div>
		<input type="text" readonly="readonly" value="&amp;#x41;" />
	</div>
	<div class="glyph">
		<div class="fs1" aria-hidden="true" data-icon="&#x42;"></div>
		<input type="text" readonly="readonly" value="&amp;#x42;" />
	</div>
	<div class="glyph">
		<div class="fs1" aria-hidden="true" data-icon="&#x43;"></div>
		<input type="text" readonly="readonly" value="&amp;#x43;" />
	</div>
	<div class="glyph">
		<div class="fs1" aria-hidden="true" data-icon="&#x44;"></div>
		<input type="text" readonly="readonly" value="&amp;#x44;" />
	</div>
	<div class="glyph">
		<div class="fs1" aria-hidden="true" data-icon="&#x45;"></div>
		<input type="text" readonly="readonly" value="&amp;#x45;" />
	</div>
	<div class="glyph">
		<div class="fs1" aria-hidden="true" data-icon="&#x46;"></div>
		<input type="text" readonly="readonly" value="&amp;#x46;" />
	</div>
	<div class="glyph">
		<div class="fs1" aria-hidden="true" data-icon="&#x47;"></div>
		<input type="text" readonly="readonly" value="&amp;#x47;" />
	</div>
	<div class="glyph">
		<div class="fs1" aria-hidden="true" data-icon="&#x48;"></div>
		<input type="text" readonly="readonly" value="&amp;#x48;" />
	</div>
	<div class="glyph">
		<div class="fs1" aria-hidden="true" data-icon="&#x49;"></div>
		<input type="text" readonly="readonly" value="&amp;#x49;" />
	</div>
	<div class="glyph">
		<div class="fs1" aria-hidden="true" data-icon="&#x4a;"></div>
		<input type="text" readonly="readonly" value="&amp;#x4a;" />
	</div>
	<div class="glyph">
		<div class="fs1" aria-hidden="true" data-icon="&#x4b;"></div>
		<input type="text" readonly="readonly" value="&amp;#x4b;" />
	</div>
	<div class="glyph">
		<div class="fs1" aria-hidden="true" data-icon="&#x4c;"></div>
		<input type="text" readonly="readonly" value="&amp;#x4c;" />
	</div>
	<div class="glyph">
		<div class="fs1" aria-hidden="true" data-icon="&#x4d;"></div>
		<input type="text" readonly="readonly" value="&amp;#x4d;" />
	</div>
	<div class="glyph">
		<div class="fs1" aria-hidden="true" data-icon="&#x4e;"></div>
		<input type="text" readonly="readonly" value="&amp;#x4e;" />
	</div>
	</section>
	<div class="clear"></div>
	<section class="mtm clearfix" id="glyphs">
	<header>
		<h1>Class Names</h1>
	</header>
	<span class="box1">
		<span aria-hidden="true" class="icon-untitled"></span>
		&nbsp;icon-untitled
	</span>
	<span class="box1">
		<span aria-hidden="true" class="icon-untitled-2"></span>
		&nbsp;icon-untitled-2
	</span>
	<span class="box1">
		<span aria-hidden="true" class="icon-untitled-3"></span>
		&nbsp;icon-untitled-3
	</span>
	<span class="box1">
		<span aria-hidden="true" class="icon-untitled-4"></span>
		&nbsp;icon-untitled-4
	</span>
	<span class="box1">
		<span aria-hidden="true" class="icon-untitled-5"></span>
		&nbsp;icon-untitled-5
	</span>
	<span class="box1">
		<span aria-hidden="true" class="icon-untitled-6"></span>
		&nbsp;icon-untitled-6
	</span>
	<span class="box1">
		<span aria-hidden="true" class="icon-untitled-7"></span>
		&nbsp;icon-untitled-7
	</span>
	<span class="box1">
		<span aria-hidden="true" class="icon-untitled-8"></span>
		&nbsp;icon-untitled-8
	</span>
	<span class="box1">
		<span aria-hidden="true" class="icon-untitled-9"></span>
		&nbsp;icon-untitled-9
	</span>
	<span class="box1">
		<span aria-hidden="true" class="icon-untitled-10"></span>
		&nbsp;icon-untitled-10
	</span>
	<span class="box1">
		<span aria-hidden="true" class="icon-untitled-11"></span>
		&nbsp;icon-untitled-11
	</span>
	<span class="box1">
		<span aria-hidden="true" class="icon-untitled-12"></span>
		&nbsp;icon-untitled-12
	</span>
	<span class="box1">
		<span aria-hidden="true" class="icon-untitled-13"></span>
		&nbsp;icon-untitled-13
	</span>
	<span class="box1">
		<span aria-hidden="true" class="icon-untitled-14"></span>
		&nbsp;icon-untitled-14
	</span>
	<span class="box1">
		<span aria-hidden="true" class="icon-untitled-15"></span>
		&nbsp;icon-untitled-15
	</span>
	<span class="box1">
		<span aria-hidden="true" class="icon-untitled-16"></span>
		&nbsp;icon-untitled-16
	</span>
	<span class="box1">
		<span aria-hidden="true" class="icon-untitled-17"></span>
		&nbsp;icon-untitled-17
	</span>
	<span class="box1">
		<span aria-hidden="true" class="icon-untitled-18"></span>
		&nbsp;icon-untitled-18
	</span>
	<span class="box1">
		<span aria-hidden="true" class="icon-untitled-19"></span>
		&nbsp;icon-untitled-19
	</span>
	<span class="box1">
		<span aria-hidden="true" class="icon-untitled-20"></span>
		&nbsp;icon-untitled-20
	</span>
	<span class="box1">
		<span aria-hidden="true" class="icon-untitled-21"></span>
		&nbsp;icon-untitled-21
	</span>
	<span class="box1">
		<span aria-hidden="true" class="icon-untitled-22"></span>
		&nbsp;icon-untitled-22
	</span>
	<span class="box1">
		<span aria-hidden="true" class="icon-untitled-23"></span>
		&nbsp;icon-untitled-23
	</span>
	<span class="box1">
		<span aria-hidden="true" class="icon-untitled-24"></span>
		&nbsp;icon-untitled-24
	</span>
	<span class="box1">
		<span aria-hidden="true" class="icon-untitled-25"></span>
		&nbsp;icon-untitled-25
	</span>
	<span class="box1">
		<span aria-hidden="true" class="icon-untitled-26"></span>
		&nbsp;icon-untitled-26
	</span>
	<span class="box1">
		<span aria-hidden="true" class="icon-untitled-27"></span>
		&nbsp;icon-untitled-27
	</span>
	<span class="box1">
		<span aria-hidden="true" class="icon-untitled-28"></span>
		&nbsp;icon-untitled-28
	</span>
	<span class="box1">
		<span aria-hidden="true" class="icon-untitled-29"></span>
		&nbsp;icon-untitled-29
	</span>
	<span class="box1">
		<span aria-hidden="true" class="icon-untitled-30"></span>
		&nbsp;icon-untitled-30
	</span>
	<span class="box1">
		<span aria-hidden="true" class="icon-untitled-31"></span>
		&nbsp;icon-untitled-31
	</span>
	<span class="box1">
		<span aria-hidden="true" class="icon-untitled-32"></span>
		&nbsp;icon-untitled-32
	</span>
	<span class="box1">
		<span aria-hidden="true" class="icon-untitled-33"></span>
		&nbsp;icon-untitled-33
	</span>
	<span class="box1">
		<span aria-hidden="true" class="icon-untitled-34"></span>
		&nbsp;icon-untitled-34
	</span>
	<span class="box1">
		<span aria-hidden="true" class="icon-untitled-35"></span>
		&nbsp;icon-untitled-35
	</span>
	<span class="box1">
		<span aria-hidden="true" class="icon-untitled-36"></span>
		&nbsp;icon-untitled-36
	</span>
	<span class="box1">
		<span aria-hidden="true" class="icon-untitled-37"></span>
		&nbsp;icon-untitled-37
	</span>
	<span class="box1">
		<span aria-hidden="true" class="icon-untitled-38"></span>
		&nbsp;icon-untitled-38
	</span>
	<span class="box1">
		<span aria-hidden="true" class="icon-untitled-39"></span>
		&nbsp;icon-untitled-39
	</span>
	<span class="box1">
		<span aria-hidden="true" class="icon-untitled-40"></span>
		&nbsp;icon-untitled-40
	</span>
	<span class="box1">
		<span aria-hidden="true" class="icon-untitled-41"></span>
		&nbsp;icon-untitled-41
	</span>
	<span class="box1">
		<span aria-hidden="true" class="icon-baseball"></span>
		&nbsp;icon-baseball
	</span>
	<span class="box1">
		<span aria-hidden="true" class="icon-sun"></span>
		&nbsp;icon-sun
	</span>
	<span class="box1">
		<span aria-hidden="true" class="icon-sunrise"></span>
		&nbsp;icon-sunrise
	</span>
	<span class="box1">
		<span aria-hidden="true" class="icon-grass"></span>
		&nbsp;icon-grass
	</span>
	<span class="box1">
		<span aria-hidden="true" class="icon-alert"></span>
		&nbsp;icon-alert
	</span>
	</section>
	<footer>
		<p>Generated by <a href="http://icomoon.io">IcoMoon.io</a></p>
	</footer>
	</div>
	<script>
	document.getElementById("glyphs").addEventListener("click", function(e) {
		var target = e.target;
		if (target.tagName === "INPUT") {
			target.select();
		}
	});
	</script>
</body>
</html>